<template>
  <div class="algorithm-list-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">算法模型列表</h1>
        <p class="page-subtitle">管理已部署的预测、诊断等AI模型</p>
      </div>
      <div class="header-right">
        <button class="header-btn" @click="refreshModels">
          🔄 刷新
        </button>
        <button class="header-btn primary" @click="deployNewModel">
          ➕ 部署新模型
        </button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-icon">🤖</div>
        <div class="stat-content">
          <div class="stat-number">{{ totalModels }}</div>
          <div class="stat-label">总模型数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-content">
          <div class="stat-number">{{ activeModels }}</div>
          <div class="stat-label">运行中</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">⚠️</div>
        <div class="stat-content">
          <div class="stat-number">{{ warningModels }}</div>
          <div class="stat-label">告警模型</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">📊</div>
        <div class="stat-content">
          <div class="stat-number">{{ avgAccuracy }}%</div>
          <div class="stat-label">平均准确率</div>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <div class="search-box">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索模型名称、类型..."
          class="search-input"
        />
        <button class="search-btn">🔍</button>
      </div>
      
      <div class="filter-controls">
        <select v-model="selectedType" class="filter-select">
          <option value="">所有类型</option>
          <option value="prediction">预测模型</option>
          <option value="diagnosis">诊断模型</option>
          <option value="classification">分类模型</option>
          <option value="anomaly">异常检测</option>
        </select>
        
        <select v-model="selectedStatus" class="filter-select">
          <option value="">所有状态</option>
          <option value="running">运行中</option>
          <option value="stopped">已停止</option>
          <option value="training">训练中</option>
          <option value="error">错误</option>
        </select>
        
        <select v-model="sortBy" class="filter-select">
          <option value="name">按名称排序</option>
          <option value="accuracy">按准确率排序</option>
          <option value="createTime">按创建时间排序</option>
          <option value="updateTime">按更新时间排序</option>
        </select>
      </div>
    </div>

    <!-- 模型列表 -->
    <div class="models-grid">
      <div 
        v-for="model in filteredModels" 
        :key="model.id"
        class="model-card"
        :class="{ 'error': model.status === 'error' }"
      >
        <div class="model-header">
          <div class="model-title">
            <h3 class="model-name">{{ model.name }}</h3>
            <span class="model-version">v{{ model.version }}</span>
          </div>
          <div class="model-status" :class="model.status">
            <span class="status-dot"></span>
            {{ getStatusText(model.status) }}
          </div>
        </div>

        <div class="model-info">
          <div class="model-type">
            <span class="type-icon">{{ getTypeIcon(model.type) }}</span>
            {{ getTypeText(model.type) }}
          </div>
          
          <div class="model-description">
            {{ model.description }}
          </div>

          <div class="model-metrics">
            <div class="metric-item">
              <span class="metric-label">准确率</span>
              <div class="metric-bar">
                <div 
                  class="metric-fill" 
                  :style="{ width: model.accuracy + '%' }"
                  :class="getAccuracyClass(model.accuracy)"
                ></div>
                <span class="metric-value">{{ model.accuracy }}%</span>
              </div>
            </div>
            
            <div class="metric-item">
              <span class="metric-label">响应时间</span>
              <span class="metric-value">{{ model.responseTime }}ms</span>
            </div>
            
            <div class="metric-item">
              <span class="metric-label">调用次数</span>
              <span class="metric-value">{{ formatNumber(model.callCount) }}</span>
            </div>
          </div>

          <div class="model-details">
            <div class="detail-row">
              <span class="detail-label">创建时间:</span>
              <span class="detail-value">{{ formatDate(model.createTime) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">最后更新:</span>
              <span class="detail-value">{{ formatDate(model.updateTime) }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">部署环境:</span>
              <span class="detail-value">{{ model.environment }}</span>
            </div>
          </div>
        </div>

        <div class="model-actions">
          <button 
            class="action-btn view"
            @click="viewModelDetails(model)"
          >
            📊 详情
          </button>
          <button 
            class="action-btn monitor"
            @click="monitorModel(model)"
          >
            📈 监控
          </button>
          <button 
            class="action-btn configure"
            @click="configureModel(model)"
          >
            ⚙️ 配置
          </button>
          <button 
            v-if="model.status === 'running'"
            class="action-btn stop"
            @click="stopModel(model)"
          >
            ⏹️ 停止
          </button>
          <button 
            v-else-if="model.status === 'stopped'"
            class="action-btn start"
            @click="startModel(model)"
          >
            ▶️ 启动
          </button>
          <button 
            class="action-btn delete"
            @click="deleteModel(model)"
          >
            🗑️ 删除
          </button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button 
        class="page-btn"
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        上一页
      </button>
      
      <div class="page-numbers">
        <button 
          v-for="page in visiblePages" 
          :key="page"
          class="page-number"
          :class="{ active: page === currentPage }"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
      </div>
      
      <button 
        class="page-btn"
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >
        下一页
      </button>
    </div>

    <!-- 模型详情弹窗 -->
    <div v-if="showModelDetail" class="modal-overlay" @click="closeModelDetail">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ selectedModel?.name }} 详细信息</h3>
          <button class="close-btn" @click="closeModelDetail">×</button>
        </div>
        
        <div class="modal-body">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <span class="label">模型名称:</span>
                <span class="value">{{ selectedModel?.name }}</span>
              </div>
              <div class="detail-item">
                <span class="label">版本:</span>
                <span class="value">v{{ selectedModel?.version }}</span>
              </div>
              <div class="detail-item">
                <span class="label">类型:</span>
                <span class="value">{{ getTypeText(selectedModel?.type) }}</span>
              </div>
              <div class="detail-item">
                <span class="label">状态:</span>
                <span class="value" :class="selectedModel?.status">
                  {{ getStatusText(selectedModel?.status) }}
                </span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h4>性能指标</h4>
            <div class="metrics-chart">
              <div class="chart-placeholder">
                📈 准确率趋势图
              </div>
              <div class="metrics-list">
                <div class="metric-detail">
                  <span class="metric-name">准确率</span>
                  <span class="metric-percent">{{ selectedModel?.accuracy }}%</span>
                </div>
                <div class="metric-detail">
                  <span class="metric-name">精确率</span>
                  <span class="metric-percent">{{ selectedModel?.precision }}%</span>
                </div>
                <div class="metric-detail">
                  <span class="metric-name">召回率</span>
                  <span class="metric-percent">{{ selectedModel?.recall }}%</span>
                </div>
                <div class="metric-detail">
                  <span class="metric-name">F1分数</span>
                  <span class="metric-percent">{{ selectedModel?.f1Score }}%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h4>部署信息</h4>
            <div class="deployment-info">
              <div class="deploy-item">
                <span class="deploy-label">容器ID:</span>
                <span class="deploy-value">{{ selectedModel?.containerId }}</span>
              </div>
              <div class="deploy-item">
                <span class="deploy-label">资源使用:</span>
                <span class="deploy-value">CPU: {{ selectedModel?.cpuUsage }}% | 内存: {{ selectedModel?.memoryUsage }}%</span>
              </div>
              <div class="deploy-item">
                <span class="deploy-label">端口:</span>
                <span class="deploy-value">{{ selectedModel?.port }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-btn secondary" @click="closeModelDetail">关闭</button>
          <button class="modal-btn primary" @click="editModel(selectedModel)">编辑模型</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedType = ref('')
const selectedStatus = ref('')
const sortBy = ref('name')
const currentPage = ref(1)
const itemsPerPage = 9

const showModelDetail = ref(false)
const selectedModel = ref(null)

// 模拟模型数据
const models = ref([
  {
    id: 1,
    name: '发动机故障预测模型',
    version: '2.1.0',
    type: 'prediction',
    status: 'running',
    description: '基于传感器数据预测发动机潜在故障',
    accuracy: 94.5,
    precision: 92.3,
    recall: 96.1,
    f1Score: 94.2,
    responseTime: 45,
    callCount: 15420,
    createTime: '2024-01-15T10:30:00Z',
    updateTime: '2024-03-10T14:22:00Z',
    environment: 'GPU集群',
    containerId: 'engine-pred-001',
    cpuUsage: 35,
    memoryUsage: 68,
    port: 8001
  },
  {
    id: 2,
    name: '武器系统诊断模型',
    version: '1.8.3',
    type: 'diagnosis',
    status: 'running',
    description: '实时诊断武器系统运行状态和异常',
    accuracy: 97.2,
    precision: 95.8,
    recall: 98.1,
    f1Score: 96.9,
    responseTime: 32,
    callCount: 8763,
    createTime: '2024-02-01T09:15:00Z',
    updateTime: '2024-03-12T11:45:00Z',
    environment: 'CPU集群',
    containerId: 'weapon-diag-002',
    cpuUsage: 28,
    memoryUsage: 45,
    port: 8002
  },
  {
    id: 3,
    name: '异常行为检测模型',
    version: '3.0.1',
    type: 'anomaly',
    status: 'training',
    description: '检测车辆运行过程中的异常行为模式',
    accuracy: 89.7,
    precision: 87.5,
    recall: 91.2,
    f1Score: 89.3,
    responseTime: 78,
    callCount: 5241,
    createTime: '2024-03-01T16:20:00Z',
    updateTime: '2024-03-15T10:30:00Z',
    environment: 'GPU集群',
    containerId: 'anomaly-det-003',
    cpuUsage: 85,
    memoryUsage: 92,
    port: 8003
  },
  {
    id: 4,
    name: '维护预测分类器',
    version: '1.5.2',
    type: 'classification',
    status: 'stopped',
    description: '预测车辆组件的维护需求等级',
    accuracy: 91.8,
    precision: 90.2,
    recall: 93.1,
    f1Score: 91.6,
    responseTime: 56,
    callCount: 3892,
    createTime: '2024-01-20T13:45:00Z',
    updateTime: '2024-03-08T15:12:00Z',
    environment: 'CPU集群',
    containerId: 'maint-class-004',
    cpuUsage: 0,
    memoryUsage: 0,
    port: 8004
  },
  {
    id: 5,
    name: '传感器数据预处理',
    version: '2.3.1',
    type: 'prediction',
    status: 'error',
    description: '传感器数据清洗和特征提取模型',
    accuracy: 85.3,
    precision: 83.7,
    recall: 86.9,
    f1Score: 85.3,
    responseTime: 25,
    callCount: 12450,
    createTime: '2024-02-10T11:20:00Z',
    updateTime: '2024-03-14T09:30:00Z',
    environment: 'CPU集群',
    containerId: 'sensor-prep-005',
    cpuUsage: 15,
    memoryUsage: 23,
    port: 8005
  },
  {
    id: 6,
    name: '性能优化推荐器',
    version: '1.2.0',
    type: 'prediction',
    status: 'running',
    description: '基于历史数据推荐性能优化方案',
    accuracy: 88.9,
    precision: 86.4,
    recall: 91.2,
    f1Score: 88.7,
    responseTime: 92,
    callCount: 2156,
    createTime: '2024-02-25T14:15:00Z',
    updateTime: '2024-03-11T16:45:00Z',
    environment: 'GPU集群',
    containerId: 'perf-opt-006',
    cpuUsage: 42,
    memoryUsage: 55,
    port: 8006
  }
])

// 计算属性
const filteredModels = computed(() => {
  let filtered = models.value

  if (searchQuery.value) {
    filtered = filtered.filter(model => 
      model.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      model.type.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  if (selectedType.value) {
    filtered = filtered.filter(model => model.type === selectedType.value)
  }

  if (selectedStatus.value) {
    filtered = filtered.filter(model => model.status === selectedStatus.value)
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'accuracy':
        return b.accuracy - a.accuracy
      case 'createTime':
        return new Date(b.createTime) - new Date(a.createTime)
      case 'updateTime':
        return new Date(b.updateTime) - new Date(a.updateTime)
      default:
        return a.name.localeCompare(b.name)
    }
  })

  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filtered.slice(start, end)
})

const totalPages = computed(() => {
  let filtered = models.value

  if (searchQuery.value) {
    filtered = filtered.filter(model => 
      model.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      model.type.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  if (selectedType.value) {
    filtered = filtered.filter(model => model.type === selectedType.value)
  }

  if (selectedStatus.value) {
    filtered = filtered.filter(model => model.status === selectedStatus.value)
  }

  return Math.ceil(filtered.length / itemsPerPage)
})

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  return pages
})

const totalModels = computed(() => models.value.length)
const activeModels = computed(() => models.value.filter(m => m.status === 'running').length)
const warningModels = computed(() => models.value.filter(m => m.status === 'error').length)
const avgAccuracy = computed(() => {
  const sum = models.value.reduce((acc, model) => acc + model.accuracy, 0)
  return Math.round(sum / models.value.length * 10) / 10
})

// 方法
const getStatusText = (status) => {
  const statusMap = {
    running: '运行中',
    stopped: '已停止',
    training: '训练中',
    error: '错误'
  }
  return statusMap[status] || status
}

const getTypeText = (type) => {
  const typeMap = {
    prediction: '预测模型',
    diagnosis: '诊断模型',
    classification: '分类模型',
    anomaly: '异常检测'
  }
  return typeMap[type] || type
}

const getTypeIcon = (type) => {
  const iconMap = {
    prediction: '🔮',
    diagnosis: '🔍',
    classification: '📋',
    anomaly: '⚠️'
  }
  return iconMap[type] || '🤖'
}

const getAccuracyClass = (accuracy) => {
  if (accuracy >= 90) return 'excellent'
  if (accuracy >= 80) return 'good'
  if (accuracy >= 70) return 'fair'
  return 'poor'
}

const formatNumber = (num) => {
  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
  if (num >= 1000) return (num / 1000).toFixed(1) + 'K'
  return num.toString()
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

const refreshModels = () => {
  console.log('刷新模型列表')
  // 重新加载数据
}

const deployNewModel = () => {
  console.log('部署新模型')
  // 跳转到模型部署页面
}

const viewModelDetails = (model) => {
  selectedModel.value = model
  showModelDetail.value = true
}

const closeModelDetail = () => {
  showModelDetail.value = false
  selectedModel.value = null
}

const monitorModel = (model) => {
  console.log('监控模型:', model.name)
  // 跳转到监控页面
}

const configureModel = (model) => {
  console.log('配置模型:', model.name)
  // 跳转到配置页面
}

const startModel = (model) => {
  console.log('启动模型:', model.name)
  model.status = 'running'
}

const stopModel = (model) => {
  console.log('停止模型:', model.name)
  model.status = 'stopped'
}

const deleteModel = (model) => {
  if (confirm(`确定要删除模型 "${model.name}" 吗？`)) {
    const index = models.value.findIndex(m => m.id === model.id)
    if (index > -1) {
      models.value.splice(index, 1)
    }
  }
}

const editModel = (model) => {
  console.log('编辑模型:', model.name)
  closeModelDetail()
  // 跳转到编辑页面
}

const changePage = (page) => {
  currentPage.value = page
}

onMounted(() => {
  console.log('算法模型列表页面已加载')
})
</script>

<style scoped>
.algorithm-list-container {
  width: 92vw;
  min-height: 100vh;
  padding: 2vw;
  background: #0c1120;
  color: #e6e6e6;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vh;
  padding: 2vh 2vw;
  background: #121a2d;
  border-radius: 12px;
  border: 1px solid #2d3a4b;
}

.page-title {
  font-size: 3.5vw;
  margin: 0 0 0.5vh 0;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.6vw;
  margin: 0;
  opacity: 0.9;
}

.header-right {
  display: flex;
  gap: 1vw;
}

.header-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 1vh 2vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2vw;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.header-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.header-btn.primary {
  background: linear-gradient(45deg, #409EFF, #337ecc);
  border-color: #409EFF;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2vw;
  margin-bottom: 3vh;
}

.stat-card {
  background: #121a2d;
  border-radius: 15px;
  padding: 2vh 1.5vw;
  border: 1px solid #2d3a4b;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  font-size: 2.5vw;
  opacity: 0.8;
}

.stat-number {
  font-size: 2.2vw;
  font-weight: 700;
  margin-bottom: 0.5vh;
}

.stat-label {
  font-size: 1.1vw;
  opacity: 0.8;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vh;
  flex-wrap: wrap;
  gap: 2vw;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 25px;
  padding: 0.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.search-input {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4vw;
  padding: 1vh 1vw;
  outline: none;
  width: 25vw;
  min-width: 200px;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.7);
}

.search-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5vw;
  cursor: pointer;
  padding: 0.5vh;
}

.filter-controls {
  display: flex;
  gap: 1vw;
}

.filter-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  color: #fff;
  padding: 1vh 1.5vw;
  font-size: 1.2vw;
  outline: none;
  backdrop-filter: blur(10px);
  min-width: 150px;
}

.filter-select option {
  background: #333;
  color: #fff;
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2vw;
  margin-bottom: 3vh;
}

.model-card {
  background: #121a2d;
  border-radius: 15px;
  padding: 2vh 1.5vw;
  border: 1px solid #2d3a4b;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.model-card.error {
  border-color: #F44336;
  box-shadow: 0 0 20px rgba(244, 67, 54, 0.3);
}

.model-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5vh;
}

.model-title {
  flex: 1;
}

.model-name {
  font-size: 1.6vw;
  margin: 0 0 0.5vh 0;
  font-weight: 600;
}

.model-version {
  background: rgba(255,255,255,0.2);
  padding: 0.2vh 0.8vw;
  border-radius: 12px;
  font-size: 0.9vw;
  font-weight: 500;
}

.model-status {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.5vh 1vw;
  border-radius: 15px;
  font-size: 1vw;
  font-weight: 600;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.model-status.running {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.model-status.running .status-dot {
  background: #4CAF50;
}

.model-status.stopped {
  background: rgba(158, 158, 158, 0.2);
  color: #9E9E9E;
}

.model-status.stopped .status-dot {
  background: #9E9E9E;
}

.model-status.training {
  background: rgba(255, 152, 0, 0.2);
  color: #FF9800;
}

.model-status.training .status-dot {
  background: #FF9800;
}

.model-status.error {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}

.model-status.error .status-dot {
  background: #F44336;
}

.model-info {
  margin-bottom: 2vh;
}

.model-type {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 1.2vw;
  margin-bottom: 1vh;
  opacity: 0.9;
}

.type-icon {
  font-size: 1.4vw;
}

.model-description {
  font-size: 1.1vw;
  opacity: 0.8;
  margin-bottom: 1.5vh;
  line-height: 1.4;
}

.model-metrics {
  margin-bottom: 1.5vh;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8vh;
  font-size: 1vw;
}

.metric-label {
  opacity: 0.8;
}

.metric-bar {
  display: flex;
  align-items: center;
  gap: 1vw;
  flex: 1;
  margin-left: 1vw;
}

.metric-fill {
  height: 6px;
  border-radius: 3px;
  background: #4CAF50;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-fill.excellent {
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
}

.metric-fill.good {
  background: linear-gradient(90deg, #FF9800, #FFC107);
}

.metric-fill.fair {
  background: linear-gradient(90deg, #FF5722, #FF9800);
}

.metric-fill.poor {
  background: linear-gradient(90deg, #F44336, #FF5722);
}

.metric-value {
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

.model-details {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1vh 1vw;
  margin-bottom: 1.5vh;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5vh;
  font-size: 0.95vw;
}

.detail-label {
  opacity: 0.7;
}

.detail-value {
  font-weight: 500;
}

.model-actions {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
}

.action-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.6vh 1vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 70px;
}

.action-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.action-btn.start {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4CAF50;
}

.action-btn.stop {
  background: rgba(255, 152, 0, 0.2);
  border-color: #FF9800;
}

.action-btn.delete {
  background: rgba(244, 67, 54, 0.2);
  border-color: #F44336;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  margin-top: 3vh;
}

.page-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 1vh 2vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2vw;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.page-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 0.5vw;
}

.page-number {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.8vh 1.2vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1vw;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.page-number:hover {
  background: rgba(255,255,255,0.2);
}

.page-number.active {
  background: #4CAF50;
  border-color: #4CAF50;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, #2a5298, #1e3c72);
  border-radius: 15px;
  width: 70vw;
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 2vw;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.8vw;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2vw;
  cursor: pointer;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255,255,255,0.1);
}

.modal-body {
  padding: 2vh 2vw;
}

.detail-section {
  margin-bottom: 3vh;
}

.detail-section h4 {
  margin: 0 0 1.5vh 0;
  font-size: 1.4vw;
  color: #4CAF50;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.5vh;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1vw;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.detail-item .label {
  font-size: 1vw;
  opacity: 0.7;
}

.detail-item .value {
  font-size: 1.2vw;
  font-weight: 600;
}

.metrics-chart {
  display: flex;
  gap: 2vw;
}

.chart-placeholder {
  flex: 2;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 3vh 2vw;
  text-align: center;
  font-size: 1.2vw;
  opacity: 0.7;
}

.metrics-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.metric-detail {
  display: flex;
  justify-content: space-between;
  padding: 1vh 1vw;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}

.metric-name {
  font-size: 1.1vw;
  opacity: 0.8;
}

.metric-percent {
  font-size: 1.2vw;
  font-weight: 600;
  color: #4CAF50;
}

.deployment-info {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 2vh 1.5vw;
}

.deploy-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1vh;
  font-size: 1.1vw;
}

.deploy-label {
  opacity: 0.7;
  flex: 1;
}

.deploy-value {
  font-weight: 500;
  flex: 2;
  text-align: right;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1vw;
  padding: 2vh 2vw;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.modal-btn {
  padding: 1vh 2vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2vw;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.3);
}

.modal-btn.secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.modal-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  color: #fff;
  border-color: #4CAF50;
}

.modal-btn:hover {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 6vw;
  }
  
  .page-subtitle {
    font-size: 3vw;
  }
  
  .header-btn {
    font-size: 2.5vw;
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-icon {
    font-size: 5vw;
  }
  
  .stat-number {
    font-size: 4vw;
  }
  
  .stat-label {
    font-size: 2.5vw;
  }
  
  .search-input {
    font-size: 3vw;
    width: 60vw;
  }
  
  .filter-select {
    font-size: 2.5vw;
  }
  
  .models-grid {
    grid-template-columns: 1fr;
    gap: 4vw;
  }
  
  .model-name {
    font-size: 3.5vw;
  }
  
  .model-version {
    font-size: 2vw;
  }
  
  .modal-content {
    width: 95vw;
    margin: 1vh;
  }
  
  .modal-header h3 {
    font-size: 4vw;
  }
}
</style>
